---
title: SaturationSlider
description: "`SaturationSlider`は、ユーザーが色の彩度を選択するために使用されるコンポーネントです。"
storybook: components-saturationslider--basic
source: components/saturation-slider
---

```tsx preview
<SaturationSlider.Root maxW="sm" />
```

## 使い方

:::code-group

```tsx [package]
import { SaturationSlider } from "@yamada-ui/react"
```

```tsx [alias]
import { SaturationSlider } from "@/components/ui"
```

```tsx [monorepo]
import { SaturationSlider } from "@workspaces/ui"
```

:::

```tsx
<SaturationSlider.Root />
```

### サイズを変更する

```tsx preview
<VStack>
  <For each={["sm", "md", "lg"]}>
    {(size, index) => (
      <SaturationSlider.Root key={index} size={size} maxW="sm" />
    )}
  </For>
</VStack>
```

### デフォルトの値を設定する

デフォルトの値を設定する場合は、`defaultValue`に値を設定します。

```tsx preview
<SaturationSlider.Root defaultValue={[120, 0.33, 0.33]} maxW="sm" />
```

### 形を変更する

```tsx preview
<VStack>
  <For each={["circle", "rounded", "square"]}>
    {(shape, index) => (
      <SaturationSlider.Root
        key={index}
        defaultValue={[120, 0.33, 0.33]}
        shape={shape}
        maxW="sm"
      />
    )}
  </For>
</VStack>
```

### ステップ値を設定する

ステップ値を設定する場合は、`step`に値を設定します。

```tsx preview
<SaturationSlider.Root step={0.1} maxW="sm" />
```

### 無効にする

無効にする場合は、`disabled`を`true`に設定します。

```tsx preview
<SaturationSlider.Root disabled maxW="sm" />
```

### 読み取り専用にする

読み取り専用にする場合は、`readOnly`を`true`に設定します。

```tsx preview
<SaturationSlider.Root readOnly maxW="sm" />
```

### ツールチップを表示する

```tsx preview functional client
const [value, setValue] = useState([120, 0.33, 0.33])

return (
  <SaturationSlider.Root value={value} onChange={setValue} maxW="sm">
    <SaturationSlider.Track>
      <Tooltip content={value}>
        <SaturationSlider.Thumb />
      </Tooltip>
    </SaturationSlider.Track>
  </SaturationSlider.Root>
)
```

### 開始と終了のイベントをハンドルする

開始と終了のイベントをハンドルする場合は、`onChangeStart`や`onChangeEnd`を使用します。

```tsx preview functional client
const [value, onChange] = useState([120, 0.33, 0.33])
const [startValue, onChangeStart] = useState([120, 0.33, 0.33])
const [endValue, onChangeEnd] = useState([120, 0.33, 0.33])

return (
  <VStack>
    <Text>
      Value: {JSON.stringify(value)}, Start Value: {JSON.stringify(startValue)},
      End Value: {JSON.stringify(endValue)}
    </Text>

    <SaturationSlider.Root
      value={value}
      onChange={onChange}
      onChangeStart={onChangeStart}
      onChangeEnd={onChangeEnd}
      maxW="sm"
    />
  </VStack>
)
```

### 制御する

```tsx preview functional client
const [value, setValue] = useState([120, 0.33, 0.33])

return <SaturationSlider.Root value={value} onChange={setValue} maxW="sm" />
```

## Props

<PropsTable name="saturation-slider" />

## アクセシビリティ

現在、v2の移行に伴い、このセクションは更新中です。
